<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>我的购物车-小米商城</title>
		<link rel="icon" href="img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/reset.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/currency.css"/>
		<link rel="stylesheet" type="text/css" href="CSS/cart.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	</head>
	<body>
		<!-- 我的购物车顶部导航栏 -->
		<div class="header-box">
			<div class="container clearfix">
				<div class="fl header-left">
					<div class="iconfont icon-icon-xiaomiguishu"></div>
					<div>我的购物车</div>
					<div>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
				</div>
				<div class="fr header-right">
					<ul>
						<li class="user-title">
							<p>
								小二<span class="iconfont icon-xia"></span>
							</p>
							<div class="user-list">
								<ul>
									<li>个人中心</li>
									<li>评价晒单</li>
									<li>我的喜欢</li>
									<li>小米账户</li>
									<li>退出登录</li>
								</ul>
							</div>
						</li>
						<li><a href="order.html" target="_blank">我的订单</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 购物车  列表详情 -->
		<div class="cart-list">
			<div id="result" class="container">
				<div class="list-title">
					<div><input class="allChec" type="checkbox" />全选</div>
					<div><!-- 商品图片占位 --></div>
					<div>商品名称</div>
					<div>单价</div>
					<div>数量</div>
					<div>小计</div>
					<div>操作</div>
				</div>
				<div class="list-body" th:each="cart:${carts}" th:dataid="${cart.id}">
					<div><input class="chec1" type="checkbox" /></div>
					<div><img width="70px" height="70px" src="" th:src="${cart.imgPath}"></div>
					<div th:text="${cart.productName}"></div>
					<div class="price1" th:text="${cart.price}"></div>
					<div class="num-box">
						<button  class="num-reduce">-</button>
						<input  class="num" readonly type="text" th:value="${cart.amount}"/>
						<button  class="num-add">+</button>
					</div>
					<div class="cost1" th:text="${cart.amount*cart.price}"></div>
					<div><span class='del'>X</span></div>
				</div>

				<!--<div class="list-body">
					<div><input class='chec1' type="checkbox" /></div>
					<div><img src="img/cart2.jpg" ></div>
					<div>Redmi路由器AX3000</div>
					<div class="price1">269</div>
					<div class="num-box">
						<button  class="num-reduce" disabled>-</button>
						<input  class="num" readonly type="text" value="1"/>
						<button  class="num-add">+</button>
						<span class="surplus">还可买<span class="surplus-num">9</span>件</span>
					</div>
					<div class="cost1">269</div>
					<div><span class='del'>X</span></div>
				</div>-->





			</div>
		</div>
		<!-- 结算界面 -->
		<form action="/confirm" id="confirmForm">
			<input type="text" name="cartIds" id="cartIds">
		<div class="cart-bottom">
			<div class="container clearfix">
				<div class="fl left">
					<span><a href="index.html">继续购物</a></span>
					<span>共 <b id="product-num">0</b> 件商品，已选择 <span id="choice-num">0</span>件</span>
				</div>
				<div class="fr">
					<span>合计<b id="total-num">0</b></span>
					<button id="confirmBtn" class="" type="button"><a href="javascript:;" target="_blank">去结算</a></button>
				</div>
			</div>
		</div>
		</form>

		<!-- 数量为0时的弹出框 -->
		<div class="alert-box">
			<div class="alert">
				<div style="text-align: right;margin: 10px 10px 0 0;">X</div>
				<div style="font-size: 26px;color: #333333;margin: 70px 10px;">修改数量不能小于0</div>
				<div style="background-color: #f5f5f5;padding: 20px;"><button id="determine" type="button" style="padding: 10px 50px;background-color: #FF6700;border: 1px;color: #ffffff;">确定</button></div>
			</div>
		</div>

		<!-- 购物车为空时的显示界面 -->
		<div class="zero">
			<div class="container clearfix">
				<img src="img/cart-empty.png" class="fl">
				<h2>您的购物车还是空的！</h2>
				<div><button type="button"><a href="index.html">马上去购物</a></button></div>
			</div>
		</div>






		<!-- 底部导航栏 -->
		<div class="footer-banner">
			<div class="container">
				<div class="footer-service">	<!-- 维修服务 -->
					<ul>
						<li>
							<i class="iconfont icon-buoumaotubiao46"></i>
							预约维修服务
						</li>
						<li>
							<i class="iconfont icon-7tiantuihuanhuo"></i>
							7天无理由退货
						</li>
						<li>
							<i class="iconfont icon-15tianwuliyoutuihuo"></i>
							15天免费换货
						</li>
						<li>
							<i class="iconfont icon-liwu"></i>
							满69包邮
						</li>
						<li>
							<i class="iconfont icon-address"></i>
							520余家售后网点
						</li>
					</ul>
				</div>
				<div class="footer-help">
					<div class="footer-help-list clearfix">
						<dl>
							<dt>帮助中心</dt>
							<dd>账户管理</dd>
							<dd>购物指南</dd>
							<dd>订单操作</dd>
						</dl>
						<dl>
							<dt>服务支持</dt>
							<dd>售后政策</dd>
							<dd>自助服务</dd>
							<dd>相关下载</dd>
						</dl>
						<dl>
							<dt>线下门店</dt>
							<dd>小米之家</dd>
							<dd>服务网点</dd>
							<dd>授权体验店</dd>
						</dl>
						<dl>
							<dt>关于小米</dt>
							<dd>了解小米</dd>
							<dd>加入小米</dd>
							<dd>投资者关系</dd>
							<dd>企业社会责任</dd>
							<dd>廉洁举报</dd>
						</dl>
						<dl>
							<dt>关注我们</dt>
							<dd>新浪微博</dd>
							<dd>官方微信</dd>
							<dd>联系我们</dd>
							<dd>公益基金会</dd>
						</dl>
						<dl>
							<dt>特色服务</dt>
							<dd>F 码通道</dd>
							<dd>礼物码</dd>
							<dd>防伪查询</dd>
						</dl>
					</div>
					<div class="footer-help-phone">
						<p>400-100-5678</p>
						<p>8:00-18:00（仅收市话费）</p>
						<p class="customer">
							<i class="iconfont icon-xiaoxi"></i>
							人工客服
						</p>
						<p class="follow">
							关注小米：
							<i class="iconfont icon-weibo1"></i>
							<i class="iconfont icon-weixin1"></i>
						</p>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部信息栏 -->
		<div class="footer-bottom">
			<div class="container">
				<div class="iconfont icon-icon-xiaomiguishu"></div>
				<div class="bottom-box">
					<div class="bottom-one">	<!-- 底部信息栏第一行 -->
						<ul>
							<li>小米商城</li>
							<li>MIUI</li>
							<li>米家</li>
							<li>米聊</li>
							<li>多看</li>
							<li>游戏</li>
							<li>政企服务</li>
							<li>小米天猫店</li>
							<li>小米集团隐私政策</li>
							<li>小米公司儿童信息保护规则</li>
							<li>小米商城隐私政策</li>
							<li>小米商城用户协议</li>
							<li>问题反馈</li>
							<li>Select Location</li>
						</ul>
					</div>
					<div class="bottom-two">	<!-- 第二行 -->
						<ul>
							<li>北京互联网法院法律服务工作站</li>
							<li>中国消费者协会</li>
							<li>北京市消费者协会</li>
						</ul>
					</div>
					<div class="bottom-three">
						<ul>
							<li>
								<a>© mi.com </a>
								<a>京ICP证110507号 </a>
								<a>京ICP备10046444号 </a>
								<a>京公网安备11010802020134号 </a>
								<a>京网文[2020]0276-042号</a>
							</li>
							<li>
								<a>（京）网械平台备字（2018）第00005号</a>
								<a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
								<a>营业执照</a>
								<a>医疗器械质量公告</a>
							</li>
							<li>
								<a>增值电信业务许可证</a>
								<a>网络食品经营备案 京食药网食备202010048</a>
								<a>食品经营许可证</a>
							</li>
							<li>
								<a>违法和不良信息举报电话：171-5104-4404 </a>
								<a>知识产权侵权投诉 </a>
								<a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
							</li>
						</ul>
					</div>
					<div class="bottom-four">
						<a><img src="img/index/truste.png" ></a>
						<a><img src="img/index/vlogo2.png" ></a>
						<a><img src="img/index/icon3.png" ></a>
						<a><img src="img/index/ba10428a4f9495ac310fd0b5e0cf8370.png" ></a>
						<a><img src="img/index/9a9e3f6928faa53374adc14a5884f896.png" ></a>
					</div>
				</div>
				<div class="bottom-text">让全球每个人都能享受科技带来的美好生活</div>
			</div>
		</div>

	<!--	<script src="JS/cart.js"></script>-->
		<script src="layui/layui.js"></script>

		<script>
			layui.use(['layer'],function() {
				var layer =layui.layer;
				var $ =layui.jquery;
				//页面一加载完需要的事情
				var total=0;
				$.each($(".list-body"),function(index,item) {
					//console.log(item);
					var amount=$(item).find(".num").val();
					if (amount == "1") {
						$(item).find(".num").prev().prop("disabled",true);
					}
					total += parseInt(amount);
				});
				//console.log(total);
				$("#product-num").html(total);

				//给删除按钮绑定事件
				$(".del").on("click",function() {
					var _this=$(this);//取到当前点击元素
					var row	= _this.parent().parent();//当前购物车数据所在div行
				    layer.confirm("您确定要删除该商品吗？",function () {
						$.post("/cart/del",{id:row.attr("dataid")},function() {
							layer.closeAll();
							row.remove();
							count();

						})
					})
				});

				$(".num-add").on("click", function() {
				   var _this=$(this);//当前点加号
					var input =_this.prev();//数量文本框
					input.val(parseInt(input.val())+1);
					//总的小计
					var sum=parseFloat(_this.parent().prev().html())*parseInt(input.val());             //单价*数量
					_this.parent().next().html(sum);//更新当前行的小计
					var row =input.parent().parent();
					input.prev().prop("disabled",false);//把减号开启
					$.post("/cart/amount",{id:row.attr("dataid"),amount :input.val()});
					count();
				});

				$(".num-reduce").on("click", function() {
					var _this=$(this);//当前点减号
					var input =_this.next();//数量文本框
					input.val(parseInt(input.val())-1);
					//总的小计
					var sum=parseFloat(_this.parent().prev().html())*parseInt(input.val());             //单价*数量
					_this.parent().next().html(sum);//更新当前行的小计
					var row =input.parent().parent();
					if(input.val() == "1")
					input.prev().prop("disabled",true);//把减号开启
					$.post("/cart/amount",{id:row.attr("dataid"),amount :input.val()});
					count();

				});
				//统计选中的商品数量和总金额
				var count=function () {
					var totalAmount = 0;//选中总金额
					var totalPrice = 0;//选中总数量

					var cartIds="";
					$.each($(".chec1:checked"),function (index,item) {//索引 元素
						var row =$(item).parent().parent();
						var amount=row.find(".num").val();
						totalAmount+=parseInt(amount);
						var sum=row.find(".cost1").html();
						totalPrice += parseInt(sum);
						if(cartIds!=""){
							cartIds+=",";
						}
						cartIds+=row.attr("dataid");
					});
					$("#cartIds").val(cartIds);
					$("#choice-num").html(totalAmount);
					$("#total-num").html(totalPrice);
					if(totalAmount>0){
						$("#confirmBtn").addClass("act");
					}
					else{
						$("#confirmBtn").removeClass("act");
					}

				};

				//给复选框绑定事件
				$(".chec1").on("click",function() {
				    count();
				    //判断选中的数量跟最大数量一样
					if($(".chec1").length==$(".chec1:checked").length){
						$(".allChec").prop("checked",true);
					}else
					{
						$(".allChec").prop("checked",false);
					}

				});

				$(".allChec").on("click",function() {
				    $(".chec1").prop("checked", $(".allChec").prop("checked"));
				    count();
				});

                //去结算按钮
				$("#confirmBtn").on("click",function() {
                   if (!$("#cartIds").val()) {
                     layer.msg("请选择商品");
                     return false;
                 }
                   $("#confirmForm").submit();
				});


		});





	</script>




	</body>
</html>
